{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" type="text/css" href="__STATIC__/css/bxslider.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery-wheel.css">
<link rel="stylesheet" href="__STATIC__/css/lottery.css">
<style>
    .content .text{
        font-size: 12px;
        line-height: normal;
    }
    .content .text p{
        margin: 15px 0;
    }
    .list-slider li{
        margin-bottom: 13px;
    }
    [v-cloak] {
        display: none;
    }
</style>
{/block}


{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>免费抽奖</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="lottery-wrapper">
            <div class="title"><img src="__STATIC__/imgs/lottery-title-txt.png" alt=""></div>
            <div class="turntable">
                <div class="box">
                    <div class="lottery">
                        <div class="block">
                            <div class="content">
                                <div class="text">
                                    <p>手机贴膜</p>
                                    <p>免费</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <!--<div class="img">
                                    <img src="img/小米手环.png" />
                                </div>-->
                                <div class="text">
                                    <p>寄件券</p>
                                    <p>免费</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <!--<div class="none">未中奖</div>-->
                                <div class="text">
                                    <p>电影票</p>
                                    <p>一张</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <div class="text">
                                    <p>3元寄件</p>
                                    <p>减免券</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <div class="text">
                                    <p>2元</p>
                                    <p>红包</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <div class="text">
                                    <p>手机贴膜</p>
                                    <p>5折券</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <div class="text">
                                    <p>谢谢参与</p>
                                </div>
                            </div>
                        </div>
                        <div class="block">
                            <div class="content">
                                <div class="text">
                                    <p>报驾校返现</p>
                                    <p>200元</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-lottery" @click="lottery">抽 奖</div>
                    <div class="str">
                        <div class="str-point"></div>
                    </div>
                </div>
            </div>
            <div class="lottery-count">当前剩余抽奖次数： <em>{{lotteryCount}}</em></div>
            <div class="explain">
                <!--<div class="title">抽奖说明</div>
                <div class="point">1、每寄一次件，可以获得一次抽奖机会。</div>
                <div class="point">2、抽中的奖品将随后自动发放到抽奖账户上。</div>
                <div class="point">3、积分将在每年的最后一天自动清零。</div>
                <div class="point">4、如有疑问可到驿站咨询，最终解释权归驿站所有。</div>-->
                <div class="title">中奖名单</div>
                <ul class="list-slider" v-cloak>
                    <li v-for="prize in prizeList">{{prize.user}} {{prize.awar_name}}</li>
                </ul>
            </div>
        </div>
    </div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script type="text/javascript" src="__JS__/jquery.bxslider.js"></script>
<script type="text/javascript" src="__JS__/jquery.rotate.js"></script>
<script>
    window.onload = function () {

    }
    var that;
    var isture = 0;//是否正在抽奖

    new Vue({
        el:'#app',
        data: {
            lotteryCount: {$count},
            prizeList: []
        },
        created() {
            that = this
            $.get('/index/index/getaward',function (res) {
                if(res.code === 0) {
                    that.prizeList = res.data
                }
            },'json')
            var timer = setInterval(() => {
                this.checkPrizeList()
                if(this.prizeList.length) {
                    $('.bx-viewport').height(110)
                    clearInterval(timer)
                }
            },0)
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            lottery() {
                if(isture) return; // 如果在执行就退出

                if(that.lotteryCount <= 0) { //当抽奖次数为0的时候执行
                    alert("没有次数了");
                    return
                }
                $.post('/index/index/getLottery',function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        var data = res.msg
                        switch(data) {
                            case '免费寄件券':
                                that.rotateFunc(1, -20, '免费寄件券');
                                break;
                            case '免费手机贴膜':
                                that.rotateFunc(2, 20 , '免费手机贴膜');
                                break;
                            case '3元寄件减免券':
                                that.rotateFunc(3, -110, '3元寄件减免券');
                                break;
                            case '电影票一张':
                                that.rotateFunc(4, -65, '电影票一张');
                                break;
                            case '手机贴膜5折券':
                                that.rotateFunc(5, 155, '手机贴膜5折券');
                                break;
                            case '2元余额红包':
                                that.rotateFunc(6, -155, '2元余额红包');
                                break;
                            case '驾校报名返现金200元':
                                that.rotateFunc(7, 65, '驾校报名返现金200元');
                                break;
                            case '谢谢参与':
                                that.rotateFunc(8, 110, '谢谢参与');
                                break;

                        }

                        that.lotteryCount -= 1
                    }
                })
            },
            rotateFunc(awards, angle, text){
                isture = true; // 标志为 在执行
                $('.lottery').stopRotate();
                $('.lottery').rotate({
                    angle: 0,//旋转的角度数
                    duration: 4000, //旋转时间
                    animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转
                    callback: function() {
                        isture = false; // 标志为 执行完毕
                        that.$message({
                            showClose: true,
                            message: text
                        });
                    }
                })
            },
            checkPrizeList() { //滚动列表
                if(this.prizeList.length) {
                    $('.list-slider').bxSlider({
                        mode: 'vertical',
                        slideWidth: $('.list-slider').width(),
                        minSlides: 4,
                        maxSlides: 4,
                        ticker: true,
                        speed: 8000,
                    });
                    $('.bx-wrapper').css({marginBottom: '0'})
                }
            }
        }
    });

</script>
{/block}